<template>
	<div id="humanik">
			<div class="content">
				<div v-for="(item,index) in djwwiu" :class="Data[index]==$route.path?'thuan':''"
					@contextmenu.prevent="openMenu($event,index)">
					<router-link :to="Data[index]">
						<span class="dot" v-show="Data[index]==$route.path"></span>
						{{item}}
						<span v-show="index!=0" class="el-icon-close close" @click.stop.prevent="remove(index)"></span>
					</router-link>
				</div>
			</div>
		<ul class="chang" :style="{left:top+'px'}" v-show="visible">
			<li @click="qita(0)">刷新</li>
			<li @click="qita(1)" v-show="left!=0">关闭</li>
			<li @click="qita(2)">关闭其他</li>
			<li @click="qita(3)">关闭所有</li>
		</ul>
	</div>
</template>
<script>
	export default {
		props: ['Data', 'djwwiu'],
		data() {
			return {
				visible: false, //控制ul显示隐藏
				top: 0, //鼠标出现的位置
				left: 0 //鼠标右击出现的位置
			}
		},
		mounted() {
			// 点击任意地方ul消失
			document.addEventListener('click', e => {
				this.visible = false
			})
		},
		methods: {
			// 右击点击时出现菜单
			openMenu(e, index) { //e是获取鼠标的位置 index下标
				this.top = e.screenX + 10 // 获取菜单的下标
				this.visible = true // 设置ul的显示
				this.left = index
				this.$router.push(`${this.Data[this.left]}`) //点击跳转路由
			},
			// x删除
			remove(index) {
				this.$router.push(`${this.Data[index-1]}`) //点击跳转路由
				this.Data.splice(index, 1) //删除路由
				this.djwwiu.splice(index, 1) //删除标题内容
			},
			qita(index) {
				// 刷新
				if (index == 0) {
					this.$router.replace({
						path: "/empty",
						query:{routerData:this.$route.fullPath}
					})
				}
				// 关闭
				if (index == 1) {
					this.djwwiu.splice(this.left, 1)
					this.Data.splice(this.left, 1)
					this.$router.push(`${this.Data[this.left-1]}`) //点击跳转路由
				}
				// 关闭其他
				if (index == 2) {
					this.djwwiu.splice(this.left + 1, this.djwwiu.length)
					this.djwwiu.splice(1, this.left - 1)
					this.Data.splice(1, this.left - 1)
					this.Data.splice(this.left + 1, this.djwwiu.length)
				}
				// 关闭所有
				if (index == 3) {
					this.djwwiu.splice(1, this.djwwiu.length)
					this.Data.splice(1, this.Data.length)
					this.$router.push("/") //点击跳转路由
				}
			}

		}

	}
</script>

<style>
	#humanik {
		display: flex;
		width: 100%;
		margin-left: 10px;
	}

	#humanik .content div {
		cursor: pointer;
		border: #ccc 1px solid;
		font-size: 12px;
		margin-right: 6px;
		display: inline-block;
		line-height: 25px;
		padding: 0px 8px;
	}

	#humanik .content a {
		text-decoration: none;
		color: #000000;
	}

	#humanik .content .thuan {
		background-color: #42b983;
	}

	#humanik .content .thuan a {
		color: #FFFFFF;
	}

	#humanik .content .dot {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: #fff;
		margin-right: 3px;
	}
	#humanik .chang {
		font-size: 12px;
		background-color: #ffffff;
		position: fixed;
		top: 80px;
		left: 240px;
		margin: 0px;
		padding: 5px 0px;
		z-index: 10;
		border-radius: 5px;
		box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
	}

	#humanik .chang li {
		cursor: pointer;
		list-style: none;
		line-height: 25px;
		padding: 0px 10px;
	}

	#humanik .chang li:hover {
		background-color: #d8d8d8;
	}
</style>
